/**
 * useDebugValue()
 *
 *    概念：
 *      useDebugValue 是一个 React Hook，可以让你在 React 开发工具 中为自定义 Hook 添加标签。
 *
 *    语法：
 *      useDebugValue(value, format?)
 *        value - 数据
 *        format - 格式化 value 的一个函数
 */

import { useDebugValue, useState } from "react";

function usePerson(initName: string, initAge: number) {
  const [person, setPerson] = useState({ name: initName, age: initAge });

  /**
   * 使用 useDebugValue 让 usePerson 在 devtools 有更好的显示
   */
  // useDebugValue(`当前age：${person.age}`);
  useDebugValue(person.age, (value) => {
    if (value > 18) {
      return "成年了";
    } else {
      return "未成年";
    }
  });

  const changeName = (newName?: string) => {
    setPerson({ ...person, name: newName || person.name + "~" });
  };

  const changeAge = (newAge?: number) => {
    setPerson({ ...person, age: newAge || person.age + 1 });
  };

  return { person, changeName, changeAge };
}

export default function App() {
  const { person, changeAge, changeName } = usePerson("张三", 18);
  return (
    <div>
      <h1>App</h1>
      <button onClick={() => changeName()}>{person.name}</button>
      <button onClick={() => changeAge()}>{person.age}</button>

      <button onClick={() => changeAge(100)}>100</button>
    </div>
  );
}
